<template>
  <section>
    <div class="totalTitle">
      <h3>每日推荐</h3>
      <van-button
          style="width:65px;"
          @click="changeGoods"
          size="mini"
          icon="replay"
          round
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          type="primary"
      >换一换</van-button>
    </div>
    <!--    加载中-->
    <div v-if="isLoading">
      <Loading></Loading>
    </div>
<!--    触底加载-->
    <div v-else class="floatBox">
    <div  class="flexBox">
        <GoodBlock
            :item="item"
            v-for="item in goodsList"
            :key="item.goodsId"
            class="animate__animated animate__bounceIn"
        ></GoodBlock>
    </div>
    </div>
  </section>
</template>

<script>
import {Recommendation} from "@/api/api";
import Loading from "@/components/Index/Loading";
import GoodBlock from "@/components/Index/GoodBlock";

export default {
  name: "dailyRecommendation",
  components:{
    Loading,
    GoodBlock,
  },
  data(){
    return{
      //加载中
      isLoading:true,
      goodsList:[],
      count:1,
    }
  },
  methods: {
  //  换一批商品
    changeGoods(){
      let countRandom = parseInt(Math.random() * 7 + 1)
      if(this.count != countRandom){
        this.count = countRandom
        console.log(this.count)
        this.getDailyGoods(this.count)
      }else{
        this.changeGoods()
      }
    },
  //  请求推荐列表数据
    getDailyGoods(pageNum){
      Recommendation(pageNum).then(res=>{
        if(res.data.code == 0){
          this.isLoading = false
          this.goodsList = res.data.rows
        }
      })
    }
  },
  created() {
    this.getDailyGoods(this.count)
  }
}
</script>

<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  section{
    margin: auto;
    .totalTitle{
      //width: 80%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      //margin :auto;
      h3{
        width: 48%;
        margin: 20px;
        text-align: center;
      }
      /deep/.van-button{
        margin-right: 20px;
      }
    }
    .flexBox{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      //margin-left: 30px;
      padding: 0 10px;
    }
  }

</style>